<template>
  <ul class="footer">
    <li class="li fli" @click="goIndex">
      <i class="iconfont icon-yisheng"></i>
      <p class="p">微医</p>
    </li>
    <li class="li fli" @click="goyanxuanproduct">
      <i class="iconfont icon-baozhuanhuan"></i>
      <p class="p">严选</p>
    </li>
    <li class="li fli" @click="goyiyantang">
      <i class="iconfont icon-jia-tianchong"></i>
      <p class="p">健康号</p>
    </li>
    <li class="li fli" @click="gofind">
      <i class="iconfont icon-faxian"></i>
      <p class="p">发现</p>
    </li>
    <li class="li fli" @click="gomy">
      <i class="iconfont icon-wode1"></i>
      <p class="p">我</p>
    </li>
  </ul>
</template>

<script>
    export default {
        name: '',
        data() {
            return {}
        },
      methods:{
        goyanxuanproduct:function(){
          this.$router.push("/yanxuanproduct");
        },
        goIndex:function(){
          this.$router.push("/");
        },
        goyiyantang:function(){
          this.$router.push("/yiyantang");
        },
        gofind:function(){
          this.$router.push("/find");
        },
        gomy:function(){
          this.$router.push("/my");
        }
      },
        mounted:function(){
//          $(".li").click(function(){
//            $(this).addClass("focus");
//            $(this).siblings().removeClass("focus");
//          })
          let nurl=this.$route.name;
          if(nurl=="Index"){
              $(".fli").eq(0).addClass("focus");
          }
          if(nurl=="YanXuanProduct"){
            $(".fli").eq(1).addClass("focus");
          }
          if(nurl=="Find"){
            $(".fli").eq(3).addClass("focus");
          }
          if(nurl=="My"){
            $(".fli").eq(4).addClass("focus");
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .footer {
    width: 100%;
    height: 0.5rem;
    border-top: 1px solid #eeeeee;
    display: flex;
    justify-content: space-around; }
   .footer .li {
    text-align: center; }
   .footer .li .iconfont {
    font-size: 0.23rem;
    margin-top: 1%; }
   .footer .li .p {
    font-size: 0.03rem;
    color: #626a7d; }
  .footer .focus {
    color: #3278ee;
    font-weight: bolder; }
   .footer .focus .p {
    color: #3278ee; }
</style>
